<template>
  <div class="page-coantainer">
    <base-dialog
      :model="addData.isOpen"
      :title="addData.title"
      @close="handleClose"
    >
      <template #body>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="菜单名" prop="name">
            <el-input v-model.trim="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="菜单类型" prop="menuType">
            <el-select v-model="formData.menuType" placeholder="请选择菜单类型">
              <span v-for="(item, index) in menuType" :key="index">
                <el-option
                  :label="item.name"
                  :value="item.type"
                  :key="index"
                ></el-option>
              </span>
            </el-select>
          </el-form-item>
          <el-form-item
            label="前端路径"
            v-if="formData.menuType === 1"
            prop="path"
          >
            <el-input v-model.trim="formData.path"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="permission">
            <el-input v-model.trim="formData.permission"></el-input>
          </el-form-item>
          <el-form-item label="前端图标" prop="icon">
            <el-input v-model.trim="formData.icon"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input type="number" v-model.trim="formData.sort"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addMenu">确 定</el-button>
      </template>
    </base-dialog>
  </div>
</template>

<script>
import { addMenu, getMenuInfoById } from '@/api/system'

export default {
  props: {
    addData: {
      type: Object
    }
  },
  data () {
    return {
      formData: {
        id: '',
        name: '',
        path: '',
        parentId: 0,
        sort: '',
        icon: '',
        menuType: 1,
        permission: ''
      },
      menuType: [{
        name: '菜单',
        type: 1
      }, {
        name: '权限',
        type: 2
      }],
      rules: {
        name: [
          { required: true, message: '请输入菜单名', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'addData.isOpen': function (isOpen) {
      if (this.addData.type === 'edit' && isOpen) {
        this.getMenuInfoById()
      }
      if (this.addData.type === 'create' && isOpen) {
        const parentId = this.addData.parentId
        parentId ? this.formData.parentId = parentId : this.formData.parentId = 0
      }
      if (!isOpen) {
        this.resetFormData()
      }
    }
  },
  methods: {
    // 根据id获取角色信息
    getMenuInfoById () {
      getMenuInfoById(this.addData.id).then(res => {
        Object.keys(this.formData).forEach((item) => {
          this.formData[item] = res.data[item]
        })
        this.formData.id = this.addData.id
      })
    },
    /* 添加菜单 */
    addMenu () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addMenu(this.formData).then(res => {
            this.$refs.form.resetFields()
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.$emit('successHandle')
            this.handleClose()
          })
        }
      })
    },
    // 重置表单
    resetFormData () {
      this.formData = {
        id: '',
        name: '',
        path: '',
        parentId: 0,
        sort: '',
        icon: '',
        menuType: 1,
        permission: ''
      }
    },
    /* 关闭弹窗 */
    handleClose () {
      this.addData.isOpen = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
